<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <!-- 搜狗强制全屏 -->
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,minimal-ui"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="true" />
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait" />
    <!-- QQ强制全屏 -->
    <meta name="x5-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="x5-page-mode" content="app">
    <!-- 360强制全屏 -->
    <meta name="360-fullscreen" content="true" />

    <link rel="stylesheet" href="__CSS__/ydui.css"/>
    <link rel="stylesheet" href="__CSS__/app.css"/>
    <js href="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"/>
    <script src="__JS__/ydui.flexible.js"></script>
    <style>
        iframe.game {
            border: 1px solid #000;
            width: 100%;
            height: 100%;
        }

        #div {
            width: 1rem;
            height: 1rem;
            top: .15rem;
            left: .15rem;
            background-color: #535353;
            border-radius: 2rem;
            position: absolute;
            font-size: .6rem;
            line-height: 1rem;
            color: #fff;
            text-align: center;
        }


    </style>
</head>
<body>

<section class="g-flexview" id="view">
    <div id="div" hidden>
        <i class="icon-home"></i>
    </div>

    <div id='tab'>
    </div>
    <div class="leftbar-box" style="display:none;">
        <div class="leftbar">
            <div class="nav">
                <ol class="cf">
                    <li class="active" style="width: 33.3333%;"><a href="javascript:;">
                        <div class="icon gift"></div>
                        <span>游戏礼包</span></a>
                    </li>
                    <li class="" style="width: 33.3333%;"><a href="javascript:;">
                        <div class="icon game"></div>
                        <span>更多游戏</span></a></li>
                    <li class="" style="width: 33.3333%;"><a href="javascript:;">
                        <div class="icon kf"></div>
                        <span>联系客服</span></a></li>
                </ol>
            </div>

            <div class="box">
                <div class="game-scroll">
                    <ol class="gift-box">
                    </ol>
                    <div class="no-gift">
                        <img id="erweima" src="__IMG__/code.jpg"><br>
                        <p>
                            <b style="color:#ffb100;">关注公众号</b>了解更多游戏福利
                        </p>
                        www.h5youx.com
                    </div>
                </div>
                <div class="game-scroll" hidden="true">
                    <ol class="gamelist">

                    </ol>
                </div>
                <div class="game-scroll" hidden="true">
                    <div class="kf">
                        <h3>关注公众号</h3>
                        <p style="font-size:11px;color:#555;">专业客服7*24小时为您解答问题</p>
                        <div style="height:10px;"></div>
                        <img src="__IMG__/code.jpg"><br>
                        <p>
                            进入公众号联系客服<b style="color:#ffb100;">成为推广员</b>
                        </p>
                        www.h5youx.com
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="his_wrap" id="his_wrap" hidden="true">
        <div class="his_box">
            <div class="his_title"><i>长按识别关注获取更多游戏</i><span onclick="$('#his_wrap').attr('hidden','true');">×</span></div>
            <div class="his_focus"><img src="<empty name='channel_icon'>__IMG__/code.jpg<else/>{$channel_icon}</empty>"></div>
            <div style="height:21px;"></div>
            <ol class="his_con">
            </ol>
            <div class="his_footer"><a href="javascript:;"
                                       onclick="window.location.href = '{:U(\'Index/index\')}'">离开游戏</a>
                <if condition="$subscribe == 0">
                <a href="javascript:;"
                   onclick="window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3MDY1MzUxMA==&scene=124#wechat_redirect'">收藏游戏入口</a></if>
                <div style="display:none" class="checkbox"><input id="his_checkbox" type="checkbox"><label
                        for="his_checkbox">今日不再提示</label></div>
            </div>
        </div>
    </div>


</section>
<notempty name="ad">
    <img src='http://www.game.net/channel/{$ad}' id='channel_ad' width='100%' height='100%' style='position: fixed;min-height: 100%;left:0;top:0;'/>
</notempty>
<!-- 引入jQuery 2.0+ -->
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="__JS__/ydui.js"></script>

<script type="text/javascript">



    var game_id = '{$game_id}';

    var is_wx = '{$is_wx}';
    if(is_wx == 1){
        pushHistory();
    }

    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
    window.addEventListener("popstate", function (e) {
        $.post('{:U("Index/gameList")}', {}, function (data) {
            var str = '';
            for (var i = 0 ;i < 3 ; i++) {
                if(game_id == data[i].id){
                    str +='<li><a href="' + data[3].url + '">';
                    str +='<img src="' + data[3].img + '" alt="'+data[3].title+'"></a></li>';
                }else{
                    str +='<li><a href="' + data[i].url + '">';
                    str +='<img src="' + data[i].img + '" alt="'+data[i].title+'"></a></li>';
                }

            }

            $('.his_con').eq(0).html(str);
        }, 'json');
        off = false;
        $('#his_wrap').removeAttr('hidden');
    }, false);




</script>


<script>



    $(function () {
        $('.leftbar-box').eq(0).css('marginLeft',parseInt('-'+$('.leftbar-box').eq(0).outerWidth()));
        $('.leftbar-box').eq(0).show();
        var game_page = 1;
        var gift_page = 1;
        var dialog = YDUI.dialog;
        var url = '{$url}';
        dialog.loading.open('很快加载好了');
        console.log(url);
//        var channel_ad = '{$ad}'
//        if(channel_ad){
//            var imageContent ="<img src='http://www.game.net/channel/{$ad}' id='channel_ad' width='100%' height='100%' style='position: fixed;min-height: 100%;left:0;top:0;'/>";
//            $("body").append(imageContent);
//        }
        var iframe = document.createElement("iframe");
        iframe.src = url;
        iframe.className = 'game';
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
                setTimeout(function () {
                    dialog.loading.close();
                    $("#channel_ad").remove()
                }, 1000);
            });
        } else {
            iframe.onload = function () {
                setTimeout(function () {
                    dialog.loading.close();
                    $("#channel_ad").remove()
                }, 1000);
            };
        }
        $('#view').append(iframe);


        var div = document.getElementById('div');
        var c_top = 0;
        var c_left = 0;
        var w = $(window).width();
        var h = $(window).height();
        $('.game-scroll').css('height', h - 64);
        $('.game-scroll').css('width', '100%');
        var click = false;
        div.addEventListener('touchstart', function (event) {
            click = true;
            event.preventDefault();//阻止其他事件
            var touch = event.targetTouches[0];
            var pos = $(this).position()
            c_top = touch.pageY - pos.top;
            c_left = touch.pageX - pos.left;
        });
        div.addEventListener('touchmove', function (event) {
            event.preventDefault();//阻止其他事件
            // 如果这个元素的位置内只有一个手指的话
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
                var left = touch.pageX - c_left;
                if (left >= 0)
                    div.style.left = touch.pageX - c_left + 'px';
                var top = touch.pageY - c_top;
                div.style.top = (top > 0 ? top : 0) + 'px';
                click = false;
            }
        }, false);
        div.addEventListener('touchend', function (event) {
            event.preventDefault();//阻止其他事件
            if (click) {
                if(off){
                    $.post('{:U("Index/gameList")}', {}, function (data) {
                        var str = '';
                        for (var i = 0 ;i < 3 ; i++) {
                            if(game_id == data[i].id){
                                str +='<li><a href="' + data[3].url + '">';
                                str +='<img src="' + data[3].img + '" alt="'+data[3].title+'"></a></li>';
                            }else{
                                str +='<li><a href="' + data[i].url + '">';
                                str +='<img src="' + data[i].img + '" alt="'+data[i].title+'"></a></li>';
                            }
                        }

                        $('.his_con').eq(0).html(str);
                    }, 'json');
                    off = false;
                    $('#his_wrap').removeAttr('hidden');
                }else{
                    location.href = '{:U("Index/index")}';
                }



            }
            var pos = $(this).position();
            var css = {
                top: pos.top + $(this).height() > h ? (h - $(this).height()) : pos.top,
                left: pos.left > w / 2 ? (w - $(this).width()) : '0.1rem'
            };
            $(this).css(css);
        });


        var tab = document.getElementById('tab');
        var t_top = 0;
        var t_left = 0;
        var click = false;
        tab.addEventListener('touchstart', function (event) {
            click = true;
            event.preventDefault();//阻止其他事件
            var touch = event.targetTouches[0];
            var pos = $(this).position()
            t_top = touch.pageY - pos.top;
            t_left = touch.pageX - pos.left;
        });
        tab.addEventListener('touchmove', function (event) {
            event.preventDefault();//阻止其他事件
            // 如果这个元素的位置内只有一个手指的话
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
                var left = touch.pageX - t_left;
                if (left >= 0)
                    tab.style.left = touch.pageX - t_left + 'px';
                var top = touch.pageY - t_top;
                tab.style.top = (top > 0 ? top : 0) + 'px';
                click = false;
            }
        }, false);
        tab.addEventListener('touchend', function (event) {
            event.preventDefault();//阻止其他事件
            if (click) {
                $('.leftbar-box').eq(0).animate({
                    marginLeft:0
                });
            }
            var pos = $(this).position();
            var css = {
                top: pos.top + $(this).height() > h ? (h - $(this).height()) : pos.top,
                left: (w - $(this).width()) + 19
            };
            $(this).css(css);
        });

        $('.cf li').click(function () {
            $('.cf li').removeClass('active');
            $(this).addClass('active');
            $('.game-scroll').attr('hidden', true);
            $('.game-scroll').eq($(".cf li").index($(this))).removeAttr('hidden');
        });
        $('.leftbar-box').eq(0).click(function () {
            $('.leftbar-box').eq(0).animate({
                marginLeft:parseInt('-'+$('.leftbar-box').eq(0).outerWidth())
            });

        });
        $('.leftbar').click(function (event) {
            event.stopPropagation();
        });


        //礼包初始化

        var gift_stop = true;

        $.post('{:U("Gift/giftList")}', {'game_id': game_id}, function (data) {
            var str = '';
            for (var item in data) {
                str += '<li><div><h3>';
                str += data[item].title + '</h3>';
                str += '<p data-info="' + data[item].subtitle + '">' + data[item].subtitle.substr(0, 18);
                str += ' <a onclick="more(this)" href="javascript:;">更多</a></p>';
                str += '<em><i style="width:' + data[item].percent + '%"></i></em><span>礼包剩余：' + data[item].percent + '%</span></div>';
                str += '<a href="javascript:void(0);" class="get_code" data-gift="' + data[item].gift + '">领取</a></li>';
            }

            if(!str){
                str += '<p align="center">暂无礼包</p>';
            }
            $('.gift-box').eq(0).html(str);
            if (data.length != 20) {
                game_stop = false;
                game_page++;
            }

            $('.get_code').click(function () {
                dialog.loading.open('奋力领取中。。。');
                var gift = $(this).attr('data-gift');
                $.ajax({
                    'url': "{:U('Gift/getCode')}",
                    type: 'post',
                    data: {gift: gift},
                    success: function (res) {
                        dialog.loading.close();
                        try {
                            if (res.status == 1) {
                                dialog.alert('恭喜你抢到兑换码：<br /><span class="badge-primary">' + res.info +'</span> （长按可复制)');
                            }else if(res.status == 2){
                                dialog.alert('<div style="text-align: center;"><img style="width:50%;margin-left:25%;" src="__IMG__/code.jpg"/><br />'+res.info+'</div>');
                            }else {
                                dialog.alert(res.info);
                            }
                        } catch (ex) {
                            dialog.alert('服务器错误');
                        }
                        console.log(res);
                    }, error: function (ex) {
                        dialog.loading.close();
                        dialog.alert('网络错误');
                    }
                });
            });
        }, 'json');

        //礼包下拉加载
        $('.game-scroll').eq(0).scroll(function (event) {
            if ($(this).scrollTop() + $('.game-scroll').eq(0).height() + 10 >= $(document).height() && $(this).scrollTop() > 10 && gift_stop) {
                gift_stop = false;
                $.post('{:U("Gift/giftList")}', {'game_id': game_id}, function (data) {
                    var str = '';
                    for (var item in data) {
                        str += '<li><div><h3>';
                        str += data[item].title + '</h3>';
                        str += '<p data-info="' + data[item].subtitle + '">' + data[item].subtitle.substr(0, 18);
                        str += ' <a onclick="more(this)" href="javascript:;">更多</a></p>';
                        str += '<em><i style="width:' + data[item].percent + '%"></i></em><span>礼包剩余：' + data[item].percent + '%</span></div>';
                        str += '<a href="javascript:void(0);" class="get_code" data-gift="' + data[item].gift + '">领取</a></li>';
                    }

                    $('.gift-box').eq(0).html(str);

                    if (data.length == 20) {
                        gift_stop = true;
                        gift_page++;
                    }

                    $('.get_code').click(function () {
                        dialog.loading.open('奋力领取中。。。');
                        var gift = $(this).attr('data-gift');
                        $.ajax({
                            'url': "{:U('Gift/getCode')}",
                            type: 'post',
                            data: {gift: gift},
                            success: function (res) {
                                dialog.loading.close();
                                try {
                                    if (res.status == 1) {
                                        dialog.alert('恭喜你抢到兑换码：<br /><span class="badge-primary">' + res.info +'</span> （长按可复制)');
                                    }else if(res.status == 2){
                                        dialog.alert('<div style="text-align: center;"><img style="width:50%;margin-left:25%;" src="__IMG__/code.jpg"/><br />'+res.info+'</div>');
                                    }else {
                                        dialog.alert(res.info);
                                    }
                                } catch (ex) {
                                    dialog.alert('服务器错误');
                                }
                                console.log(res);
                            }, error: function (ex) {
                                dialog.loading.close();
                                dialog.alert('网络错误');
                            }
                        });
                    });
                }, 'json');
            }
        });


        //游戏初始化
        var game_stop = true;

        $.post('{:U("Index/gameList")}', {}, function (data) {
            var str = '';
            for (var item in data) {
                str += '<li><img src="' + data[item].img + '" alt="'+data[item].title+'">';
                str += '<div><h3>' + data[item].title + '</h3>';
                str += '<p>' + data[item].subtitle + '</p></div>';
                str += '<a href="' + data[item].url + '" >进入</a></li>';
            }

            $('.gamelist').eq(0).html(str);

            if (data.length != 20) {
                game_stop = false;
                game_page++;
            }
        }, 'json');

        //游戏下拉加载
        $('.game-scroll').eq(1).scroll(function (event) {
            if ($(this).scrollTop() + $('.game-scroll').eq(1).height() + 10 >= $(document).height() && $(this).scrollTop() > 10 && game_stop) {
                game_stop = false
                $.post('{:U("Index/gameList")}', {'page': game_page}, function (data) {
                    console.log(data.length);

                    var str = '';
                    for (var item in data) {
                        str += '<li><img src="' + data[item].img + '" alt="'+data[item].title+'">';
                        str += '<div><h3>' + data[item].title + '</h3>';
                        str += '<p>' + data[item].subtitle + '</p></div>';
                        str += '<a href="' + data[item].url + '" >进入</a></li>';
                    }

                    $('.gamelist').eq(0).append(str);
                    if (data.length == 20) {
                        game_stop = true;
                        game_page++;
                    }

                }, 'json');
            }
        });



    });

    function more(_this) {
        alert($(_this).parent().attr('data-info'));
    }




</script>
<script src="__JS__/vconsole.min.js"></script>
<script type="text/javascript">
    var jsparam = {};
    var dialog = YDUI.dialog;
    var pay_type = '{$pay_type}';
    var channel = '{$channel_id}';

    //调用微信JS api 支付
    function jsApiCall(obj) {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                jsparam,
                function (res) {
                    var url = '{$url}';
                    if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        dialog.alert('<span style="color:#00BB00">支付成功！</span>');
                    } else {
                        if (typeof res.err_code != 'undefined' && res.err_code == 3 || typeof res.err_code != 'undefined' && res.err_code == 2) {
                            H5Pay(obj);
                        } else {
                            dialog.alert('<span style="color:#BB0000">支付失败</span>');
                        }
                    }
                    console.log(res);
                }
        );
    }

    function callpay(obj) {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
            dialog.alert('请在微信中打开');
        } else {
            jsApiCall(obj);
        }
    }
    // main js function
    function fMain(v) {
        console.log(v);
        var obj = typeof v == 'object' ? v : JSON.parse(v);
        obj._gameID = '{$Think.get.id}';

        var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        //var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        console.log(pay_type + ' IOS:' + isIOS);
        if (isIOS && pay_type == '2') {
            H5Pay(obj);
        }else{
            JsPay(obj);
        }

        console.log(obj);
    }

    function H5Pay(obj) {
        obj.channel_id = channel;
        obj.player_id = '{$player_id}';
        if(typeof(obj.extra) != 'undefined'){
            obj.extra = decodeURIComponent(obj.extra);
        }
        window.location.href = 'http://www.h5youx.com/game/index.php?m=Home&c=Public&a=H5pay&obj='+JSON.stringify(obj);
    }

    function JsPay(obj) {
        $.ajax({
            url: 'test/pay.php',
            type: 'post',
            data: obj,
            success: function (res) {
                try {
                    jsparam = JSON.parse(res);
                    callpay(obj);
                } catch (ex) {
                    dialog.alert('<span style="color:#BB0000">支付错误！</span>');
                }
            }, error: function (ex) {
                dialog.alert('网络错误！');
            }
        });
    }

    function NativePay(obj) {
        $.ajax({
            url: 'test/native.php',
            type: 'post',
            data: obj,
            success: function (res) {
                try {
                    var rst = JSON.parse(res);
                    if (rst.status == 1) {
                        var html = '<div style="text-align: center;"><img style="width:50%;margin-left:25%;" src="http://paysdk.weixin.qq.com/example/qrcode.php?data=' + rst.data + '"/><br />1.截屏保存二维码<br />↓<br />2.打开微信扫一扫<br />↓<br />3.选择相册二维码图片<br />↓<br />4.识别二维码完成支付</div>';
                        dialog.confirm('<div style="text-align: center;color:green;box-shadow: 0 2px 2px -3px #666; padding-bottom:.2em;">支付方式</div>', html, [
                            {
                                txt: '<span style="font-size:.8em;color:red;">注：IOS不支持跨号支付，点击此处关闭</span>',
                                stay: false, /* 是否保留提示框 */
                                color: '#999', /* 使用颜色值 */
                                callback: function () {
                                }
                            },
                        ]);
                    } else {
                        dialog.alert('网络错误！le ');
                    }
                } catch (ex) {
                    dialog.alert('网络错误！');
                }
            }, error: function (ex) {
                dialog.alert('网络错误！');
            }
        });
    }




    var title = '{$name}';
    var link = 'https://www.h5youx.com/testadmin/game/index.php?m=Home&c=Index&a=detail&id={$game_id}';
    var imgUrl = 'https://www.h5youx.com/appc/Uploads/{$icon}';
    var desc = '{$sub_title}';
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{$wx.appid}', // 必填，公众号的唯一标识
        timestamp:'{$wx.timestamp}' , // 必填，生成签名的时间戳
        nonceStr: '{$wx.nonceStr}', // 必填，生成签名的随机串
        signature: '{$wx.sign}',// 必填，签名，见附录1
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        //
        // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            link:link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //分享朋友
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:imgUrl, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //分享QQ
        wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link:link, // 分享链接
            imgUrl:imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //分享微博
        wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //分享空间
        wx.onMenuShareQZone({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

    });

    wx.error(function(res){
        console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

    });
</script>
</body>
</html>